@use "../../../variables.scss" as *;
@use "../fonts" as *;

.sps-list {
  width: 100%;
  display: flex;
  padding: var(--sjs2-spacing-x100, 8px);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin: 0;
  overflow-y: auto;
  list-style-type: none;

  box-sizing: border-box;
}

.sps-list__container {
  width: 288px;
}

.sps-list__item {
  width: 100%;
  outline: none;
}

.sps-list__item--positive {
  .sps-list__item-body {
    color: var(--sjs2-color-fg-brand-primary, #19b394);
  }
}

.sps-list__item--alert {
  .sps-list__item-body {
    color: var(--sjs2-color-fg-alert-primary, #C30935);
  }
}

.sps-list__item-body {
  @include textEllipsis;
  @include sjs2--typography--default;
  text-align: start;
  color: var(--sjs2-color-fg-basic-primary, #1c1b20);
  transition: color $creator-transition-duration;

  display: flex;
  flex: 1 0 0;
  display: flex;
  padding: var(--sjs2-spacing-x100, 8px) var(--sjs2-spacing-x150, 12px);
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border-radius: var(--ctr-list-item-corner-radius, var(--sjs-corner-radius-x075));
  cursor: pointer;

  transition: background-color $creator-transition-duration;

  & > span,
  & > sv-ng-string {
    flex: 1 0 0;
  }
}

.sps-list__item:disabled,
.sps-list__item--disabled {
  opacity: var(--ctr-list-item-opacity-disabled, 0.25);
  pointer-events: none;
}

.sps-list__item--label {
  opacity: 1;
  .sps-list__item-body {
    display: flex;
    padding: var(--sjs2-spacing-x100, 8px) var(--sjs2-spacing-x100, 8px) var(--sjs2-spacing-x050, 4px) var(--sjs2-spacing-x150, 12px);
    align-items: center;
    gap: 8px;
    align-self: stretch;

    overflow: hidden;
    color: var(--sjs2-color-fg-basic-tertiary, rgba(28, 27, 32, 0.40));

    @include sjs2--typography--small-strong;
  }
  padding-bottom: var(--sjs2-spacing-x050, 4px);
} 

.sps-list__item--group {
  .sps-list__item-body {
    padding-right: 0;
  }
}

.sps-list__item:focus,
.sps-list__item:hover,
.sps-list__item--focused,
.sps-list__item--hovered {
  & > .sps-list__item-body {
    background: var(--sjs2-color-bg-brand-tertiary-dim, rgba(25, 179, 148, 0.1));
  }
}

.sps-list__item--alert:focus,
.sps-list__item--alert:hover {
  & > .sps-list__item-body {
    background: var(--sjs2-color-bg-alert-tertiary-dim, rgba(229, 10, 62, 0.10));
  }
}

.sps-list__item--selected,
.sps-list__item--selected:hover,
.sps-list__item--selected:focus,
.sps-list__item.sps-list__item--selected:hover {
  & > .sps-list__item-body {
    @include sjs2--typography--default-strong;
    color: var(--sjs2-color-fg-static-main-primary, #fff);
    background: var(--sjs2-color-bg-brand-primary, #19b394);
  }
}

.sps-list__item-separator {
  width: calc(100% + var(--sjs2-spacing-x150, 12px));
  height: var(--sjs2-border-width-x100, 1px);
  margin: var(--sjs2-spacing-x100, 8px) calc(-1 * var(--sjs2-spacing-x150, 12px));
  background: var(--sjs2-color-border-basic-secondary, #d4d4d4);
}

.sps-list-item__marker-icon {
  display: flex;
  padding: 0;
  align-items: flex-start;
  width: 24px;
  height: 24px;
  box-sizing: content-box;
  justify-content: center;

  use {
    fill: currentColor;
  }
}

.sps-list__container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  height: 100%;
}
